<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- 版本更新 -->
<template>
  <div>
    <HeadLine :headName="headName" @backClick="backClick" />
    <div class="newVersion_container" :style="style">
      <div>
        <div class="warning_line" v-if="waringShow" :style="{ 'background-color': warningBackground }">
          <img class="warning_line_icon" src="@/assets/image/icon/drawing_board.png">
          <p class="warning_line_tips" :style="{'color':warningColor}" :class="{'rtl-l text-r': $rtl}">{{waringText}}</p>
        </div>
        <!-- 更新进度 -->
        <div class="container_progress" v-if="updating">
          <CircleProgress :canvasWidth="canvasWidth" :strokeWidth="strokeWidth" @on-download-complete="onDownloadComplete" @on-download-error="onDownloadError" ref="circleProgress">
          </CircleProgress>
        </div>
      </div>

      <!-- 设备图片 -->
      <div class="device_img" :class="{'rtl-l': $rtl}" v-if="!updating">
        <img src="@/assets/image/device.png">
      </div>
      <p class="update_status" :class="{'rtl-l': $rtl}" v-show="updating">{{updatingText}}</p>
      <p class="version_line" :class="{'rtl-l': $rtl}">1.0.1</p>
      <p class="update_memory" :class="{'rtl-l': $rtl}">
        大小：<span>2M</span>
      </p>
      <ProgramIntroduce :textObj="textObj" style="margin-top: 3.2rem;" />
      <div class="version_btn" :class="{'rtl-l': $rtl}" v-if="isNewVersion == '1'">
        <div class="version_btn_group">
          <button class="btn" @click="down" v-show="updateCompelete === 0">下载并更新</button>
          <button class="btn" @click="cancelUadate" v-show="updating && updateCompelete > 0">取消</button>
        </div>
      </div>
    </div>
    <ConfirmModule v-if="showConfirm" :confirmObj="confirmObj" @showConfirm="showConfirm=false" />
  </div>
</template>
<script>
import HeadLine from "@/components/HeadLine";
import ProgramIntroduce from "@/components/ProgramIntroduce";
import CircleProgress from "../components/CircleProgress";
import ConfirmModule from "../components/ConfirmModule";
export default {
  components: {
    HeadLine,
    ProgramIntroduce,
    CircleProgress,
    ConfirmModule
  },
  data() {
    return {
      textObj: {  //文本展示内容
        title: '新版本 更新日志',
        tips: [
          { value: '1.当设备电量低于20%，充电后再升级。' },
          { value: '2.当设备电量低于20%，充电后再升级。' },
          { value: '3.当设备电量低于20%，充电后再升级。' }
        ],
        content: [
          { value: '1.三方定义内容' },
          { value: '2.更新内容' },
          { value: '3.更新内容' }
        ]
      },
      style: {
        marginTop: (px2rem(window.topHeight) + 5.6) + 'rem'
      },
      confirmObj: {
        title: "提示",
        titleTextCenter: true,
        tips: '请确认一下问题后，再重新操作：',
        tipsTextCenter: false,
        showCancelButton: false,
        cancelButtonText: '',
        confirmButtonText: '知道了',
        questionList: ['请确认手机蓝牙已开启', '确保设备电量充足开启', '确保手机离设备1米之内']
      },
      showConfirm: false,
      waringShow: true,
      canvasWidth: 13.6 * window.rem,
      strokeWidth: 2 * window.rem,
      updating: false, // 正在更新
      updateStatus: false, // 更新完成
      isNewVersion: 0, // 是否为新版本
      headName: '',
      updateCompelete: 0,
      updatingText: '正在下载',
      warningBackground: window.isDark ? '#2C150D' : '#FDEADE',
      warningColor: window.isDark ? '#DB6B42' : '#ED6F21',
      // '当前网络连接不稳定，建议更换网络或稍后重试。'
      waringText: '更新期间设备将停止工作，数据无法保存。请将手机靠近设备，并确保设备开启。更新时，保持在此页面。',
    }
  },
  mounted() {
    this.isNewVersion = this.$route.query.isNew ? this.$route.query.isNew : '0';
    this.headName = this.isNewVersion == 0 ? this.$t('BDT_fascialgun_current_version') : this.$t('BDT_fascialgun_new_version');
  },
  methods: {
    // 更新成功
    onDownloadComplete: function () {
      this.updateStatus = true;
      // 1 下载完成 2 传输完成
      if (this.updateCompelete === 1) {
        this.updating = false;
        this.transmission();
      } else if (this.updateCompelete === 2) {
        this.transmissionSuccess();
      }

    },

    onDownloadError: function () { },

    //返回
    backClick() {
      this.backToUpgrade();
    },
    //下载
    down() {
      this.updating = true;
      this.updateCompelete = 1;
      this.updatingText = '正在下载...';
      this.$nextTick(() => {
        this.$refs['circleProgress'].initMethod(4000);
      })
    },

    //传输
    transmission() {
      this.updating = true;
      this.updateCompelete = 2;
      this.textObj.title = " "
      this.updatingText = '正在传输...';
      this.$nextTick(() => {
        this.$refs['circleProgress'].initMethod(10000);
      })
    },

    //传输完成
    transmissionSuccess() {
      this.updating = true;
      this.updateCompelete = 3;
      this.updatingText = '已传输完成,请在设备侧查看更新进度';
      this.waringShow = false;
    },

    //取消更新
    cancelUadate() {
      this.updating = false;
      this.updateStatus = false;
      this.backToUpgrade();
    },

    //更新完成
    compelete() {
      this.backToUpgrade();
    },

    //返回固件升级页
    backToUpgrade() {
      this.$router.back()
    }
  }
}
</script>
<style scoped>
.newVersion_container {
  display: flex;
  flex-direction: column;
  padding: 0 1.2rem;
  position: fixed;
  top: 0;
  left: 0;
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  overflow: hidden scroll;
}

.device_img {
  margin-top: 7.9rem;
  height: 21.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.device_img img {
  width: 16.8rem;
  height: 16.8rem;
}

.version_line {
  font-family: HarmonyOS_Sans_SC_Medium;
  font-size: 1.8rem;
  height: 2.4rem;
  text-align: center;
  line-height: 2.4rem;
}

.update_status,
.update_memory {
  text-align: center;
  opacity: 0.6;
  font-size: 1.4rem;
}

.update_status {
  font-weight: 500;
  margin-bottom: 1.6rem;
}

.update_memory {
  margin-top: 0.8rem;
}

.warning_line {
  background: rgb(255, 117, 0, 0.05);
  border-radius: 1.6rem;
  display: flex;
  align-items: center;
  padding: 1.2rem;
  margin-top: 0.8rem;
  position: fixed;
  left: 0;
  margin: 0 1.2rem;
  z-index: 1;
}

.warning_line_icon {
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 1.6rem;
}

.warning_line_tips {
  font-size: 1.6rem;
  color: #ff7500;
  word-break: break-word;
}

.version_btn {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: center;
  margin-bottom: 2.1rem;
  padding: 0 1.5rem;
}

.btn {
  height: 4rem;
  font-size: 1.6rem;
  font-family: HarmonyOS_Sans_SC_Medium;
  background: #fb6522;
  color: #fff;
  border: 0;
  border-radius: 2rem;
  width: 100%;
  max-width: 44.8rem;
}

.container_progress {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 9.9rem 0 1.6rem;
}
</style>